<template>
    <div class="sever_list">
        <div class="server_title">
            <div class="crumbs store_title">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>banner设置</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="mainBtn">
                <el-button type="success" @click="addBanner()"><i class="el-icon-plus"></i>添加</el-button>
                <!--<el-button type="info"><i class="el-icon-delete"></i>垃圾箱</el-button>-->
            </div>
        </div>
        <el-table :data="list" border style="width: 100%" ref="multipleTable">
            <el-table-column  prop="fettle" label="状态" sortable >
            </el-table-column>
            <el-table-column prop="position" label="排序"  align="center">
            </el-table-column>
            <el-table-column label="图片地址"  align="center">
                <template slot-scope="scope">
                    <a style="cursor: pointer" @click="handlePictureCardPreview(scope.$index, scope.row)">查看详情</a>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="banner名称" >
            </el-table-column>
            <el-table-column prop="bannerUrl" label="链接地址"  align="center">
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="addExternalUser(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--<div class="pagination">
            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, prev, pager, next"
                    :total="pageNum"
                    :page-size="pageSize"
                    :current-page="cur_page">
                </el-pagination>
            </div>
        </div>-->


        <!--Dialog-->
        <el-dialog
            :title="banTitle"
            :visible.sync="addBannerItemDialog"
            width="500px">
            <el-form ref="addBan" :model="addBan" label-width="120px">
                <el-form-item label="banner名称：">
                    <el-input v-model="addBan.name"></el-input>
                </el-form-item>
                <el-form-item label="banner图片：">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :on-change="onUploadChange"
                        :on-preview="handlePictureCardPreview"
                        :file-list="fileList"
                        list-type="picture"
                        :auto-upload="false"
                        :limit=1>
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb,图片尺寸为1080*575</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="链接地址：">
                    <el-input v-model="addBan.bannerUrl"></el-input>
                </el-form-item>
                <el-form-item label="排序：">
                    <el-input v-model="addBan.position"></el-input>
                </el-form-item>
                <el-form-item v-if="ifEdit" label="状态：">
                    <el-radio v-model="addBan.status" label="NORMAL">启用</el-radio>
                    <el-radio v-model="addBan.status" label="DISABLED">禁用</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addBannerItemDialog = false" >取 消</el-button>
                <el-button type="primary" @click="saveBanner()">确 定</el-button>
        </span>
        </el-dialog>
        <!--查看图片-->
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>



<script>
    import {
        //列表
        bannerList,
        //图片
        attachments,
        //修改
        storeAsGet,
        storeAsPut,
        storeAsPost,
    } from '../api/api';
    import {base64,tool_confirm} from '../tool/tool'
    export default {
        data() {
            return {
                //数据列表
                list: [],
                //添加弹窗
                addBannerItemDialog:false,
                //图片
                fileList:[],
                //新增数据
                addBan:{
                    name:"",
                    startTime: '2017-05-22 14:16:40',
                    endTime: '2028-12-16 14:16:40',
                    position:'',
                    bannerPic:'',
                    description:'',
                    bannerUrl:'',
                    bannerType:"MINI_APP",
                    status: 'NORMAL',
                },
                addBanObj:{
                    name:"",
                    startTime: '2017-05-22 14:16:40',
                    endTime: '2028-12-16 14:16:40',
                    position:'',
                    bannerPic:'',
                    description:'',
                    bannerUrl:'',
                    bannerType:"MINI_APP",
                    status: 'NORMAL',
                },
                //编辑
                ifEdit:false,
                ifServer:false,
                //标题
                banTitle:'',
                banId: null,
                fileImg: '',
                // 提交的数据
                trueForm:{
                },
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        created() {
            this.getBannerList();
        },
        computed: {
        },
        methods: {
            // 获取banner列表
            getBannerList(){//获取项目列表
                bannerList().then(res => {
                    console.log(res)
                    // 赋值
                    this.list = res.data.content.banners.content;
                    // 修改状态为文字
                    this.list.forEach((val)=>{
                        if(val.status === 'NORMAL'){
                            val.fettle = '启用'
                        }else{
                            val.fettle = '禁用'
                        }
                        // if(val.bannerPic != ''){
                        //     val.bannerText = '查看图片'
                        // }
                    });
                });
            },
            // 添加banner
            addBanner(){//添加门店
                this.ifEdit = false;
                this.ifServer = false;
                this.banTitle='添加banner';
                this.addBan = this.addBanObj;
                this.fileList = [];
                this.addBannerItemDialog = true;
            },
            //上传图片事件
            onUploadChange(file) {
                let that = this;
                let base64Url = base64(file.url);

                base64Url.then(function(url){
                    let str = url.split(',');
                    console.log(str[1]);
                    attachments(str[1]).then(res =>{
                        that.addBan.bannerPic = res.data.content.imgId;
                        console.log(res.data.content.imgId,that.addBan.bannerPic);
                    })
                })
            },
            // 新增/编辑保存
            saveBanner() {
                //真实提交的数据
                this.trueForm = {
                    name:this.addBan.name,
                    position:this.addBan.position,
                    bannerPic:this.addBan.bannerPic,
                    bannerUrl:this.addBan.bannerUrl,
                    bannerType:"MINI_APP",
                    description:'',
                    status: this.addBan.status,
                    startTime: '1451581261000',
                    endTime: '1851326911000',
                };
                // 判断是否为编辑，调用不同接口
                if(this.ifEdit){
                    storeAsPut('/banners?id='+this.banId, this.trueForm).then(res=>{
                        this.getBannerList();
                        this.addBannerItemDialog = false;
                        this.$message.success(`修改成功`);
                    });
                }else{
                    storeAsPost(this.trueForm,'/banners').then(res=>{
                        this.addBannerItemDialog = false;
                        this.$message.success(`添加成功`);
                        this.getBannerList();
                    });
                }

            },
            //修改banner
            editFn(e,val){
                this.ifEdit = true;
                this.banTitle='修改banner';
                this.banId = val.id;
                this.ifServer = true;
                storeAsGet('/banners?id='+val.id).then(res => {
                    console.log(res,"id")
                    this.addBan = res.data.content.entity;
                    this.addBannerItemDialog = true;
                    this.fileList = [];
                    this.fileList[0] = {};
                    this.fileList[0].url = this.$ajaxBase + '/attachments/download?id=' + this.addBan.bannerPic;
                    this.fileImg = this.addBan.bannerPic;
                });
            },
            handlePictureCardPreview(e,val) {
                storeAsGet('/banners?id='+val.id).then(res => {
                    console.log(res,"id")
                    this.dialogVisible = true;
                    this.dialogImageUrl = this.$ajaxBase + '/attachments/download?id=' + res.data.content.entity.bannerPic;
                });
            },
            // 禁用启用
            addExternalUser(e){
                let that = this;
                console.log(e.id)
                tool_confirm(this,'是否要删除该banner？').then(res => {
                    storeAsPut('banners/delete?id=' + e.id).then(function(res){
                        console.log(res)
                        that.$message({
                            message: '已删除该banner！',
                            type: 'success'
                        });
                        that.getBannerList();
                    })
                }).catch(() => {
                    console.log('取消')
                });

            },
        }
    }
</script>

<style scoped>
    .serve_select_width{
        width: 80px;
    }
    .server_cell{
        width: 100px;
        padding: 10px!important;
        margin: 5px 10px!important;
        position: relative;
        background: #f9f9f9!important;
        box-shadow: 0 1px 2px #999;
    }
    .server_img{
        width: 100px;
    }
    .server_font{
        margin-top: 5px;
        font-size: 14px;
        color: #666;
    }
    .active{
        box-shadow: 0 1px 2px #05111D;
    }
    .active .server_font{
        color: #fff;
    }
    .server_delete_btn{
        position: absolute;
        right: 3px;
        top: 3px;
        width: auto!important;
        background: #fff;
        display: block;
        padding: 5px;
        border-radius: 100%;
        color: #20a0ff;
    }
    .add_server_btn{
        margin: 5px 10px!important;
        background: #f9f9f9!important;
        box-shadow: 0 1px 2px #999;
    }
    .add_server_btn:hover{
        background: #20a0ff!important;
        color: #fff!important;
    }
    .add_server_btn i{
        opacity: 1!important;
        visibility:inherit!important;
        width: auto!important;
    }

</style>
